<template>
    <div class="app">
        <myheader
            :closeTime="closeMsg"
            :greetings="greetMsg"
        ></myheader>
        <swiper></swiper>
        <popular :goodTypeList="goodTypeList"></popular>
        <myfooter tabIndex="0"></myfooter>
    </div>
</template>

<script>
import myheader from './components/header';//头部
import swiper from './components/swiper';//轮播部分
import popular from './components/popular';//产品分类
import myfooter from './components/footer';//底部
export default {
    name: "index",
    components: {
        myheader,
        swiper,
        popular,
        myfooter
    },
    data() {
        return {
            closeMsg: "最晚营业至21:00",
            greetMsg: '晚上好。',
            goodTypeList: [{
                id: 1,
                iconUrl: '/static/icon/itemIcon-01.png',
                itemName: '新品',
                goodNumber: 7
            }, {
                id: 2,
                iconUrl: '/static/icon/itemIcon-02.png',
                itemName: '咖啡',
                goodNumber: 6
            }, {
                id: 3,
                iconUrl: '/static/icon/itemIcon-03.png',
                itemName: '星冰',
                goodNumber: 6
            }, {
                id: 4,
                iconUrl: '/static/icon/itemIcon-04.png',
                itemName: '果汁',
                goodNumber: 5
            }, {
                id: 5,
                iconUrl: '/static/icon/itemIcon-05.png',
                itemName: '糕点',
                goodNumber: 4
            }, {
                id: 6,
                iconUrl: '/static/icon/itemIcon-06.png',
                itemName: '饼干',
                goodNumber: 3
            }]
        };
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.app {
    background: #f7f7f7;
    height: 100%;
}
</style>
